<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

	</head>

	<body>
		<div class="col-lg-12" id="detailNotice">
			<ol class="breadcrumb">
				<li><i class="fa fa-home"></i>
					<a href="index.html">Home</a>
				</li>
				<li><i class=""></i>查看公告</li>
			</ol>

			<div class="mcomment">
				<h3 class="page-header"><i class=""></i>查看公告</h3>
				<!--获奖信息搜索-->
				<div class="row form-group">
					<div class="input-group container-fluid" style="width: 50%;">
						<span class="input-group-addon">
							<i class="fa fa-search"></i>
						</span>
						<input v-model="searchBox" type="text" class="form-control" placeholder="输入想要搜索获奖信息" />
						<span class="input-group-btn">
							<button   @click="searchType(searchBox)"  class="btn btn-default">搜索</button>
						</span>
					</div>
				</div>
				<!--比赛信息搜索结束-->

				<!--列表及操作-->
				<!--操作-->
				<div>
					<!--列表-->
					<div>
						<table class="table table-bordered table-hover table-responsive">
							<thead>
								<tr>
									<td>
										<strong>标题</strong>
									</td>
									<td>
										<strong>类型</strong>
									</td>
									<td>
										<strong>添加时间</strong>
									</td>
									<td>
										<strong>操作</strong>
									</td>
								</tr>
							</thead>
							<tr v-for='Notice in NoticeLists'>
								<td>{{Notice.title}}</td>
								<td>{{Notice.laName}}</td>
								<td>{{Notice.addTime}}</td>

								<td>
									<button data-toggle="modal" data-target="#showNotcie" @click="see(Notice.noId)" class="btn btn-success">查看</button>
									<button data-toggle="modal" data-target="#modifyNotcie" @click="modify1(Notice.noId)" class="btn btn-warning">修改</button>
									<button class="btn btn-danger" @click="delete1(Notice.noId)">删除</button>
								</td>
							</tr>

						</table>
					</div>
					<!--列表结束-->

				</div>
				<!--列表及操作结束-->
				<!--分页导航-->
				<center>
					<ul class="pagination">
						<li>
							<a @click="getajax(1)">首页</a>
						</li>
						<li>
							<a @click="getajax(page-1)">上一页</a>
						</li>
						<li>
							<li v-for="value in showpage">
								<a style="background: red;" @click="getajax(value)" v-if="page==value">
									{{value}}
								</a>

								<a v-else @click="getajax(value)">{{value}}</a>

							</li>
						</li>
						<li>
							<a @click="getajax(page+1)">下一页</a>
						</li>
						<li>
							<a @click="getajax(countpage)">尾页</a>
						</li>
					</ul>
				</center>
				<!--分页导航结束-->

			</div>

			<!--查看弹出框 start-->
			<div class="modal" id="showNotcie">
				<div class="modal-dialog">
					<div class="modal-content" style="width: 900px">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
							<h4>查看公告</h4>
						</div>

						<div class="modal-body" id="detali">
								<table class="table table-bordered">
									<tr>
									<td><label for="awardPersonName">标题：</label></td>
										<td><input v-model="dea.title" class="form-control " type="text" readonly="readonly" /></td>

									</tr>
								<tr>
									<td><label for="awardPersonName">类型：</label></td>
									<td><input v-model="dea.laName" class="form-control " type="text" readonly="readonly" /></td>

								</tr>

								<tr>
									<td><label for="awardPersonName">修改人：</label></td>
									<td><input v-model="dea.modifiName" class="form-control " type="text" readonly="readonly" /></td>

								</tr>

								<tr>
									<td><label for="awardPersonName">添加时间：</label></td>
									<td><input v-model="dea.addTime" class="form-control " type="text" readonly="readonly" /></td>

								</tr>
										
								<tr>
									<td><label for="awardPersonName">修改时间：</label></td>
									<td><input v-model="dea.modifiTime" class="form-control " type="text" readonly="readonly" /></td>

								</tr>
								<tr>
									<td colspan="4">
										<div class="form-group">
										<label for="awardContent">内容：</label>
										<!--<textarea disabled="disabled"  class="form-control" id="noticeContent" cols="100%" rows="10">-->
													<!--{{dea.content}}																				-->
										<!--</textarea>-->
												<div v-html="dea.content" class="form-control" style="width:800px ;height: 100%">
												</div>
										</div>
										
									</td>
									
								</tr>	
								
										
							</table>
							
						</div>
						
						
					</div>
				</div>
			</div>

			<!--查看弹出框 end-->
			
			
			<!--修改弹出框 start-->
			<div class="modal" id="modifyNotcie">
				<div class="modal-dialog">
					<div class="modal-content" style="width: 800px">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
										</button>
										<h4>修改公告</h4>
						</div>

						<div class="modal-body">
							<table class="">
								<div class="form-group form-inline">
									<label for="noticeTitle">标题：</label>
									<input v-model="modify.title" class="form-control" id="noticeTitle" placeholder="请输入公告标题" />
								</div>
								<div class="form-group form-inline">
									<label for="noticeType">类型：</label>
									<select v-model="comId" class="form-control">
										<option v-for="op in types" v-bind:value="op.comId">
											{{op.laName}}
										</option>
									</select>
								</div>
								<div class="form-group">
									<label for="noticeContent">公告内容：</label>
									<!--<script v-model="modify.content" id="modifyNoticeContent" name="content"  type="text/plain">
										{{modify.content}}
									</script>-->
									<!--<textarea v-model="modify.content" class="form-control" id="modifyNoticeContent" cols="100%" rows="10">-->

									<!--</textarea>-->
									<textarea id="text1Modify"    class="form-control" style="display: none" >
											</textarea>
									<div id="meuenModify" class="toolbar">
									</div>
									<div style="padding: 5px 0; color: #ccc"></div>
									<div id="editorModify"   class="text" style="width: 100%;height: 100%;border:1px solid black"> <!--可使用 min-height 实现编辑区域自动增加高度-->

									</div>

								</div>
								<center>
									<div style="width: 50%;">
										<button class="btn btn-default" @click="publish">发布</button>
										<button class="btn btn-danger" data-dismiss="modal">取消</button>
									</div>
								</center>

							</table>

						</div>

					</div>
				</div>
			</div>

			<!--修改弹出框 end-->

		</div>

		<!--<script type="text/javascript">
			var ue = UE.getEditor('modifyNoticeContent');
		</script>-->

		<script type="text/javascript">
			var url1 = 'http://donting.free.idcfengye.com';
			var editor;
			var da = new Vue({
				el: '#detailNotice',
				data: {
					count: '', //总记录数
					countpage: '10', //总页数
					page: '', //当前页
					showpage: [],
					NoticeLists: [],
					comId: "1",
					title: '',
					types: [],
					modify: {}, //修改公告
					dea: {}, //查看公告
					searchBox: '',
				},
				methods: {
					publish: function() {

						var x=document.getElementById("text1Modify");
						da.modify.content=x.value;
						axios.defaults.withCredentials = true;

						axios.post(url1 + '/notice/modify2', {　

								'title': da.modify.title,
								'content': da.modify.content,
								'comId': da.id,
								'noId': da.modify.noId

						}).then(function(response) {
							var rs = response.data;

							// alert(rs.code);　　
							if(rs.code == 200) {
								console.log(rs.code);
								alert("修改成功!");
							} else {
								alert("修改失败!");
							}

						}).catch(function(error) {　　
							alert("连接超时！");
						});

					},
					see: function(id) {

						for(var i = 0; i < da.NoticeLists.length; i++) {
							if(id == da.NoticeLists[i].noId) {

								da.dea = da.NoticeLists[i];

								return;
							}
						}

					},
					searchType: function(searchBox) {
						alert(id)
					},
					delete1: function(id) {
						axios.defaults.withCredentials = true;
						axios.get(url1 + '/notice/delete', {　
							params: {
								'noId': id
							}
						}).then(function(response) {
							var rs = response.data;

							if(rs.code == 200) {
								console.log(rs.code);
								alert("删除成功!");
								da.getajax(da.page);
							} else {
								alert("删除失败!");
							}

						}).catch(function(error) {　　
							alert("连接超时！");
						});
					},
					modify1: function(id) {

						for(var i = 0; i < da.NoticeLists.length; i++) {
							if(id == da.NoticeLists[i].noId) {
								da.id = da.NoticeLists[i].comId;
								da.modify = da.NoticeLists[i];
								editor.txt.html(da.modify.content);
								return;
							}
						}
					},

					getajax: function(page) {
						if(page <= 0) {
							alert("没有上一页");
							return;
						}
						if(page > this.countpage) {
							alert("没有下一页了");
							return;
						}

						axios.defaults.withCredentials = true;

						axios.get(url1 + '/notice/findAllPage', {
							params: {
								'page': page
							}
						}).then(function(response) {
							var rs = response.data;　

							if(rs.code == 4003) {
								alert("无数据");
								return;
							}

							da.countpage = rs.countpage;
							da.page = rs.page;
							da.count = rs.count;
							da.NoticeLists = rs.data;

							var cout = 0;
							var pa = [];
							if (rs.page <= 3) {

								for (var i = 1; i <= da.countpage && cout < 5; i++) {
									pa.push(i);
									cout++;
								}

							} else {

								if (rs.countpage - rs.page >= 2) {
									pa.push(rs.page - 2);
									pa.push(rs.page - 1);
									pa.push(rs.page);
									pa.push(rs.page + 1);
									pa.push(rs.page + 2);
								} else {
									pa.push(rs.countpage - 4);
									pa.push(rs.countpage - 3);
									pa.push(rs.countpage - 2);
									pa.push(rs.countpage - 1);
									pa.push(rs.countpage);

								}

							}
							da.showpage = pa;

						}).catch(function(error) {　　
							alert("连接超时！");
						});

					}

				},
				mounted() {
					this.getajax(1);
					GetType(this);
					var E = window.wangEditor

					editor =new E('#meuenModify', '#editorModify');
					var $text1 = $('#text1Modify')
					editor.customConfig.withCredentials = true
					editor.customConfig.uploadFileName = 'file';
					editor.customConfig.uploadImgServer = url1+'/addEdImgUp'

					editor.customConfig.onchange = function (html) {
						// 监控变化，同步更新到 textarea
						$text1.val(html)
						console.log("更新...")
					}

					editor.create()
				}

			});
		</script>

	</body>

</html>